<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>图片上传</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="content-title">支持拖拽</div>
            <div class="plugins-tips">
                Element UI自带上传组件。
                访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank">Element UI Upload</a>
            </div>
            <el-upload
                class="upload-demo"
                drag
                action="http://jsonplaceholder.typicode.com/api/posts/"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <div class="content-title">支持裁剪</div>
            <div class="plugins-tips">
                vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。
                访问地址：<a href="https://github.com/Agontuk/vue-cropperjs" target="_blank">vue-cropperjs</a>
            </div>
            <div class="crop-demo">
                <img :src="cropImg" class="pre-img">
                <div class="crop-demo-btn">选择图片
                    <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage"/>
                </div>
            </div>
        
            <el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%">
                <vue-cropper ref='cropper' viewMode=1 :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;"></vue-cropper>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelCrop">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import VueCropper  from 'vue-cropperjs';
    import 'cropperjs/dist/cropper.css';
    export default {
        name: 'Upload',
        components: {
            VueCropper
        },
        data () {
            return {
                defaultSrc: require('assets/img/img.jpg'),
                fileList: [],
                imgSrc: '',  // 图片资源
                cropImg: '', // 剪切后的图片路径
                dialogVisible: false,
            }
        },
        created () {
            this.cropImg = this.defaultSrc;
        },
        mounted () {
        },
        methods: {
            // 选择剪切图片触发的事件
            setImage(e) {
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    // 用这种方法可以判断上传的是否是图片
                    return;
                }
                const reader = new FileReader();
                reader.onload = (event) => {
                    this.dialogVisible = true;
                    this.imgSrc = event.target.result;
                    this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
                }
                reader.readAsDataURL(file);  // 以什么方式读取文件，不同方法读取返回文件内容不同
            },
            cropImage() {
                // 触发的vue-cropper的三个事件 这里实现的功能是让剪切的图片可以实时显示到 <img :src="cropImg" class="pre-img">
                // 处理逻辑应该是禁止el-upload自动上传，等用户截取完图片后点击dialog中的确定按钮触发上传功能

                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
                // this.$refs.cropper.getCroppedCanvas()  // canvas对象
                // this.$refs.cropper.getCroppedCanvas().toBlob((blob)=>{}) 上传文件
            },
            cancelCrop() {
                this.dialogVisible = false;
                this.cropImg = this.defaultSrc;
            },
            imageuploaded(res) {
                console.log(res)
            },
            // 错误处理
            handleError() {
                this.$notify.error({
                    title: '上传失败',
                    message: '图片上传接口上传失败，可更改为自己的服务器接口'
                });
            }
        }
    }
</script>


<style scoped>
    .content-title{
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }

    .pre-img{   
        width: 100px;
        height: 100px;
        background: #f8f8f8;
        border: 1px solid #eee;
        border-radius: 5px;
    }

    .crop-demo{
        display: flex;
        align-items: flex-end;
    }
    /* 文件按钮样式修改：在一个div放入input 让div相对定位，input绝对定位 */
    /* input会在div上面，把input的opacity设置为0 */
    /* 需要注意div和input的宽高要一致 */
    .crop-demo-btn{
        position: relative;
        width: 100px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        margin-left: 30px;
        background-color: #409eff;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
    }

    .crop-input{
        position: absolute;
        width: 100px;
        height: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }
</style>


<!-- 
    注意：
    使用element-ui会自动上传
    使用http-request属性可以取消默认上传
    这个链接是操作实例 (加入了进度条的显示)
    https://blog.csdn.net/qq_38475901/article/details/98037449
 -->